<template>
  <div class="main">
    <section>
      <el-button type="primary" @click="$router.push({name:'goodsMiddleStage-propertyDetailAdd'})">新建属性</el-button>
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="id" label="属性id" width="180">
        </el-table-column>
        <el-table-column prop="name" label="属性名" width="180">
        </el-table-column>
        <el-table-column prop="inputType" label="录入方式" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.inputType === 0? '手工录入' :'列表选取'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="inputs" label="列表可选值">
          <span slot-scope="scope">{{scope.row.inputs}}</span>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="$router.push({name:'goodsMiddleStage-propertyDetailEdit', params:{...scope.row}})">编辑</el-button>
            <el-button type="danger" @click="deleteComfir(scope.row)" plain>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>
  </div>
</template>

<script>
import { getAttr, deleteAttr } from '@/api/goodMiddleStage'
 
export default {
  name: 'property',
  components: {},
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const { data } = await getAttr({
          attrGroupId: this.$route.params.attrGroupId
        })
        this.list = data.attrList
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    async deleteComfir(val) {
      try {
        await this.$confirm('是否要删除当前属性组', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this._deletAttr(val)
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    async _deletAttr(val) {
      try {
        const { data, message } = await deleteAttr({ id: val.id })
        if (message === 'SUCCESS') {
          this.$message.success('操作成功')
          this.getList()
        }
      } catch (error) {
        this.$message.success('操作失败')
        console.log(error)
      }
    }
  }
}
</script>

<style>
</style>